<template>
  <div class="goods-desc">
    <!-- 使用头部组件 -->
    <My-Header header_title="图文介绍"></My-Header>

    <h3 class="desc-title">{{ goodsInfo.title}}</h3>
    <div class="desc-content" v-html=" goodsInfo.content"></div>
  </div>
</template>

<script>
// 引入MyHeader组件
import MyHeader from '@/components/MyHeader'
// 引入封装好的请求函数
import { getGoodsInfo } from '@/api'

export default {
  // 注入组件
  components: {
    MyHeader
  },
  data () {
    return {
      // 当前商品的id
      id: this.$route.params.id,
      // 当前商品的图文介绍信息
      goodsInfo: {}
    }
  },
  created () {
    /* 初始化图文介绍页 */
    this.initGoodsDesc()
  },
  methods: {
    /* 初始化图文介绍页 */
    initGoodsDesc () {
      // 发请求，获取图文信息
      getGoodsInfo(this.id).then(res => {
        if (res.status === 0) {
          this.goodsInfo = res.message[0]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
img {
    display: block;
}

.goods-desc {
  margin-top: 50px;
  h3 {
    font-weight: bold;
    color: #26a2ff;
    font-size: 16px;
    margin-bottom: 5px;
  }
  .desc-content {
    font-size: 14px;
  }
}
</style>
